<!-- 这里是店铺管理页面 -->
<template>
  <div class="storeManage">
    <!-- 店铺查询 -->
    <el-card class="searchCard" shadow="never" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>店铺查询</span>
      </div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <div>
          <el-form-item label="店铺名称">
            <el-input v-model="formInline.storeName" size="middle" style="width:300px" placeholder="请输入店铺名称" />
          </el-form-item>
          <el-form-item label="添加时间">
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd hh:mm:ss"
              @change="submitTime"
            />
          </el-form-item>
        </div>
        <!-- 店铺查询按钮 -->
        <el-form-item>
          <el-button size="small" @click="reset">重置</el-button>
          <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 店铺列表 -->
    <el-card shadow="never" class="storeList" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>店铺管理</span>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column
          prop="storeName"
          label="店铺名称"
          width="200"
        />
        <el-table-column label="logo" align="center" width="150">
          <template slot-scope="scope">
            <img :src="scope.row.logo" width="70" height="70">
          </template>
        </el-table-column>
        <el-table-column
          prop="introduction"
          label="简介"
          width="400"
        />
        <el-table-column
          prop="region"
          label="所属地区"
          width="150"
        />
        <el-table-column
          prop="phone"
          label="联系电话"
          width="150"
        />
        <el-table-column
          prop="addTime"
          label="添加时间"
          width="200"
        />
        <el-table-column
          label="店铺状态"
          width="200"
          prop="state"
          :formatter="stateFormat"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <!-- 表格功能按钮部分 改变状态按钮通过三元运算符进行判断 -->
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="changeState(scope.row)"> {{ scope.row.state === 0 ? "启用":"禁用" }} </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等),
// 例如：import 《组件名称》 from '《组件路径》'
import storeManageApi from '@/api/storeManage/index'
export default {
// import引入的组件需要注入到对象中才能使用,
  components: {},
  data() {
    // 这里存放数据
    return {
      currentPage4: 4, // 当前页数
      checkPage: 1, // 更改状态时判断是全部列表还是搜索列表页面,
      newState: 0, // 上传数据更改店铺状态,
      formInline: { // 查询数据
        storeName: '',
        addTime: '',
        renewTime: ''
      },
      value1: [], // 获取到的时间值
      tableData: [] // 获取列表数据
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getStoreList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    // 分页事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 判断店铺状态
    stateFormat(row, column) {
      if (row.state === 0) {
        return '禁用'
      } else {
        return '启用'
      }
    },
    // 获取店铺数据列表
    getStoreList() {
      this.checkPage = 0
      this.loading = true
      setTimeout(() => {
        storeManageApi.storemanageIndex().then(res => {
          if (res.code === 0) {
            this.tableData = res.data
            console.log(res)
            console.log(this.tableData)
          } else {
            this.$message.error('获取列表数据失败')
          }
        })
        this.loading = false
      })
    },
    // 时间查询
    submitTime() {
      console.log(this.value1)
      this.formInline.addTime = this.value1 ? this.value1[0] || '' : ''
      this.formInline.renewTime = this.value1 ? this.value1[1] || '' : ''
    },
    // 查看
    handleClick(value) {
      // 路由跳转
      console.log(value)
      this.$router.push({ name: 'Detail', params: { storeId: value.storeId }})
    },
    // 查询提交
    onSubmit() {
      this.checkPage = 1
      storeManageApi.listByMap({
        storeName: this.formInline.storeName,
        addTime: this.value1[0],
        renewTime: this.value1[1]
      }).then(res => {
        console.log(res)
        this.tableData = res.data
      })
    },
    // 查询重置
    reset() {
      this.formInline = {}
      this.value1 = []
      this.getStoreList()
    },
    // 根据ID更改店铺状态
    changeState(val) {
      console.log(val.state)
      if (val.state === 0) {
        this.newState = 1
      } else {
        this.newState = 0
      }
      storeManageApi.updateById({
        storeId: val.storeId,
        state: this.newState
      }).then(res => {
        console.log(res)
        if (this.checkPage === 0) {
          this.getStoreList()
        } else {
          this.onSubmit()
        }
      })
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
.storeManage{
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
  overflow: hidden;
  .searchCard{
    margin: 30px;
    .demo-form-inline{
      display: flex;
      justify-content: space-between;
    }
  }
  .storeList{
    margin: 30px;
     .block{
     padding: 20px;
     display: flex;
     justify-content: center;
   }
  }
}
</style>
